<template>
	<yb-popup popout="fade" direction="right" :visible.sync="visible" @show="onshow" @hide="onhide">
		<view class="yb-flex yb-flex-1"  :style="{
			'background-color': skinColor.color_bg_1,
			width: (windowWidth / 2) + 'px'
		}">
			<yb-nav-bar
			:title="'共' + catalog.length + unit"
			tabbar
			:options="{
				bgColor: skinColor.color_bg_1,
				color: skinColor.color_1,
				statusBarColor: 'rgba(0,0,0,.5)'
			}"></yb-nav-bar>
			<view class="header padding-gap yb-flex yb-justify-center" :style="{'background-color': skinColor.color_gap_2}">
				<text class="text" :style="{color: skinColor.color_3, 'font-family': fontFamily}">{{title}}</text>
			</view>
			<yb-virtual-list
			ref="list"
			:data="catalog"
			height="90"
			:loading="{
				show: loading,
				color: skinColor.color_1,
				bgColor: skinColor.color_bg_1
			}"
			:empty="{
				show: catalog.length == 0,
				color: skinColor.color_gap_1,
				bgColor: skinColor.color_bg_1
			}">
				<template v-for="(item, index) in catalog" :slot="index">
					<view class="list yb-flex yb-row yb-align-center padding-gap" :style="{'border-color': skinColor.color_gap_2}" @tap="onCatalogClick(item)">
						<text class="text yb-flex-1" :style="{color: type == 'chapter' && record && record.chapter == item.chapter ? skinColor.color_red : skinColor.color_1, 'font-family': fontFamily}">{{item.title}}</text>
						<yb-tap custom-class="icon" stop @click="handleRemove(item)" v-if="enableEdit">
							<rd-icon  name="dustbin" :color="skinColor.color_2" size="30"></rd-icon>
						</yb-tap>
						<yb-text :color="skinColor.color_red" custom-class="icon" size="26" value="付费" v-if="item.isVip"></yb-text>
						<yb-icon name="angle-arrow-right" class="icon" :color="skinColor.color_2" size="30" v-if="!item.isVip && !enableEdit"></yb-icon>
					</view>
				</template>
			</yb-virtual-list>
		</view>
	</yb-popup>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			type: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			fontFamily: {
				type: String,
				default: ''
			},
			catalog: {
				type: Array,
				default () {
					return new Array
				}
			}
		},
		data () {
			return {
				loading: true,
				visible: false,
				windowWidth: 0
			}
		},
		computed: {
			record () {
				return this.$store.getters['reader/getRecord']
			},
			unit () {
				return this.type == 'chapter' ? '章节' : '书签'
			},
			enableEdit () {
				return this.type == 'chapter' ? false : true
			}
		},
		methods: {
			onCatalogClick (params) {
				if ( params.isVip ) {
					uni.showToast({
						title: '该章节需要付费或VIP才能阅读',
						icon: 'none'
					})
					return
				}
				this.$emit('itemClick', params)
			},
			handleRemove (params) {
				this.$store.dispatch('mark/remove', params.id)
			},
			show () {
				this.windowWidth = uni.getSystemInfoSync().windowWidth
				this.$nextTick(function () {
					this.visible = true
				})
			},
			hide () {
				this.visible = false
			},
			onshow () {
				this.$nextTick(function () {
					this.$nextTick(function () {
						setTimeout(() => {
							if ( this.record ) {
								let index = this.catalog.findIndex(ca => ca.chapter == this.record.chapter)
								if ( index > -1 ) {
									this.$refs.list.scrollToIndex(index)
								}
							}
							this.loading = false
						}, 500)
					})
				})
			}
		}
	}
</script>

<style>
	.catalog-wrapper {
		position: absolute;
		right: 0;
		top: 0;
	}
	.header {
		height: 50rpx;
	}
	.header .text {
		font-size: 22rpx;
	}
	.list {
		height: 89rpx;
		border-bottom-width: 1rpx;
	}
	.list .text {
		font-size: 24rpx;
		text-overflow: ellipsis;
		lines: 1;
	}
	.list .icon {
		margin-left: 10rpx;
	}
	.column {
		flex-direction: row;
		align-items: flex-start;
		margin: 10rpx 0;
	}
	.column .cover {
		width: 100rpx;
		height: 165rpx;
		margin-right: 20rpx;
	}
	.column .right {
		flex: 1;
	}
	.column .title {
		font-size: 24rpx;
		flex: 1;
		text-overflow: ellipsis;
		lines: 1;
	}
	.column .hint {
		font-size: 20rpx;
		margin-top: 10rpx;
		flex: 1;
		text-overflow: ellipsis;
		lines: 1;
	}
	.column .desc {
		font-size: 22rpx;
		margin-top: 10rpx;
		flex: 1;
		text-overflow: ellipsis;
		lines: 4;
	}
</style>
